<template>
  <div>
    <input type="hidden" id="payStatus" value="${payStatus}">
    <el-container style="height: 90%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1" >
            <template slot="title"><i class="el-icon-bank-card"></i>学费缴纳</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="()=>{this.currentPage='feePayment'}">学费</el-menu-item>
              <el-menu-item index="1-2" disabled>其他费用</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-search"></i>缴费查询</template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="()=>{this.currentPage='feeSearch'}">已缴费查询</el-menu-item>
              <el-menu-item index="2-2" @click="()=>{this.currentPage='feeNeedPaySearch'}">未缴\未缴清费用查询</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-document"></i>个人信息</template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="()=>{this.currentPage='studentInfo'}">个人信息维护</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{studentName}}</span>
          <el-button type="text" @click="logout">退出</el-button>
        </el-header>

        <el-main>
          <div v-if="this.currentPage==='feePayment'">
            <fee-payment ref="feePayment"></fee-payment>
          </div>
          <div v-if="this.currentPage==='feeSearch'">
            <fee-search></fee-search>
          </div>
          <div v-if="this.currentPage==='studentInfo'">
            <student-info></student-info>
          </div>
          <div v-if="this.currentPage==='feeNeedPaySearch'">
            <fee-need-pay-search></fee-need-pay-search>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
import studentInfo from "./info/studentInfo";
import feeSearch from "./search/feeSearch";
import feePayment from "./fee/feePayment";
import feeNeedPaySearch from "./search/feeNeedPaySearch";
import $ from 'jquery'
import axios from "axios";

export default {
  name:'payInfo',

  data() {
    return{
      studentName:'',
      testData:'777777',
      currentPage:'',
      currentFeeId:''
    }
  },
  methods:{
    logout(){
      //调用后端，删除redis中保存的登录信息
      axios.get('/api/app/logout').then(res=>{
        console.log(res)
      });

      localStorage.removeItem("studentName")
      localStorage.removeItem("studentId")
      window.location.href="/"
    }
  },
  created() {
    if(localStorage.getItem("studentName")==null){
      window.location.href="/"
    }
    this.studentName = localStorage.getItem("studentName")
    let url = window.location.href
    let params = url.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
    let Search = new URLSearchParams('?'+params)  //将参数放在URLSearchParams函数中
    let payStatus = Search.get('payStatus')   //1001
    if(payStatus == '1'){
      this.$message({
        message: '缴费成功',
        type: 'success'
      });
      setTimeout(()=>{
        window.location.href='/payInfo'
      },1500)
    }
    if(payStatus == '0'){
      this.$message.error('缴费失败');
      window.location.href='/payInfo'
    }
  },
  components:{
    studentInfo,
    feeSearch,
    feePayment,
    feeNeedPaySearch
  }
};
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
